<template>
  <j-modal
    title='业务日志'
    :width='1200'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <!--    <div class='info-line'>基础设置</div>-->
    <template slot='footer'>
      <a-button @click='handleCancel'>关闭</a-button>
      <!--      <a-button type='primary' @click='handleOk'>确认</a-button>-->
    </template>
    <a-row>
      <a-col span='17'>
        <a-table
          ref='table'
          size='middle'
          class='Table'
          bordered
          :scroll='{y:600}'
          rowKey='id'
          :columns='columns'
          :dataSource='dataSource'
          :pagination='false'
          :loading='loading'
          :customRow='onSingleClickRow'
          :rowSelection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:"radio" }'
          @change='handleTableChange'
        >
        <span slot='action' slot-scope='text, record'>
          <a @click='handleJson(record)'>JSON对比</a>
        </span>
        </a-table>
        <div class='pagination'>
          <div class='div-box' @click='paginationCurrent(1)'>上一页</div>
          <div class='div-box' @click='paginationCurrent(2)'>下一页</div>
          <a-select :default-value='10' v-model='ipagination.pageSize' size='small' @change='handlePaginationChange'>
            <a-select-option :value='10'>
              10条/页
            </a-select-option>
            <a-select-option :value='20'>
              20条/页
            </a-select-option>
            <a-select-option :value='30'>
              30条/页
            </a-select-option>
            <a-select-option :value='40'>
              40条/页
            </a-select-option>
            <a-select-option :value='50'>
              50条/页
            </a-select-option>
          </a-select>
        </div>
      </a-col>
      <a-col span='6' :offset='1'>
        <textarea :value="selectionRows.length>0 ? selectionRows[0].changeJson :''" class='textarea' style='width: 100%;border-color: #EDEFF0;border-radius: 8px;'
                  rows='10'>
        </textarea></a-col>
    </a-row>
    <jsonContrast :visible-one.sync='visibleOne' :json-new='jsonNew' :json-old='jsonOld'></jsonContrast>
  </j-modal>
</template>

<script>

import { PageListMixin } from '@/mixins/PageListMixin'
import jsonContrast from './JsonContrasts'

export default {
  name: 'carModelListModel',
  mixins: [PageListMixin],
  data() {
    return {
      visibleOne: false,
      jsonOld: '',
      jsonNew: '',
      manobjList: [0],
      areaData: '',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        modelCode: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      columns: [
        {
          title: '操作类型',
          align: 'left',
          ellipsis: true,
          dataIndex: 'operType'
        },
        {
          title: '业务名称',
          align: 'center',
          dataIndex: 'businessName',
          ellipsis: true
        },
        {
          title: '业务对象',
          align: 'left',
          ellipsis: true,
          dataIndex: 'businessJson'
        },
        {
          title: '操作人',
          align: 'left',
          ellipsis: true,
          dataIndex: 'createName'
        },
        {
          title: '操作时间',
          align: 'left',
          ellipsis: true,
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 120,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      disableMixinCreated: true,
      url: {
        list: window._CONFIG['domianMqURL'] + '/logApi/findBusinessPageList'
      }
    }
  },
  components: { jsonContrast },
  created() {

  },
  methods: {
    handleJson(row) {
      this.visibleOne = true
      this.jsonOld = JSON.parse(row.oldBusinessJson)
      this.jsonNew = JSON.parse(row.businessJson)
    },
    show(businessId, businessName = '业务日志配置') {
      this.searchOn = {
        businessId,
        businessName
      }
      this.onClearSelected()
      this.loadData(1)
      this.visible = true
    },
    close() {
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
    },
    // 分页
    paginationCurrent(value) {
      if (value == 1) {
        if (this.ipagination.current > 1) {
          this.ipagination.current--
          this.loadData()
        } else {
          this.$message.info('已经是第一页了哦！')
        }
      } else {
        this.ipagination.current++
        this.loadData()
      }
    }
  }
}
</script>

<style lang='less' scoped>
.pagination {
  float: right;
  margin: 16px 0;

  .div-box {
    height: 24px;
    line-height: 22px;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #d9d9d9;
    padding: 0 8px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .div-box:hover {
    background-color: #00A0E9;
    color: #FFFFFF;
    border-color: transparent;
  }
}
</style>